<template>
  <!--  @open='getAllChannels' -->
  <van-action-sheet :value='value' @input="$emit('input',$event)" @closed="editing=false" title="编辑频道" @open='getAllChannels'>
    <div class="channel">
      <div class="tit">
        我的频道：
        <span class="tip">点击可进入频道</span>
        <van-button v-if="!editing" @click="editing=true" size="mini" type="info" plain>编辑</van-button>
        <van-button v-else @click="editing=false" size="mini" type="danger" plain>完成</van-button>
      </div>
      <van-grid class="van-hairline--left">
        <van-grid-item v-for="(item, index) in channels" :key="item.id">
          <span class="f12" @click="toggleActive(index)" :class='{red: active === index}'>{{item.name}}</span>
          <van-icon @click="deleteChannel(item.id,index)" v-show="editing" class="btn" name="cross"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="channel">
      <div class="tit">可选频道：</div>
      <van-grid class="van-hairline--left">
        <van-grid-item v-for="item in selectChannels" :key="item.id">
          <span class="f12">{{item.name}}</span>
          <van-icon @click="addChannel(item)" class="btn" name="plus"></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
  </van-action-sheet>
</template>
<script>
// 导入获取所有频道列表的接口
import { getAllChannels, deleteChannel, addChannel } from '@/api/channel.js'
export default {
  props: {
    value: {
      type: Boolean
    },
    channels: {
      type: Array
    },
    active: {
      type: Number
    }
  },
  computed: {
    //   计算可选频道
    selectChannels () {
      // 遍历所有频道列表
      return this.allChannels.filter(item => {
        //   我们想要的值是在当前用户频道中没有的值
        // 下面some方法返回的值是如果有满足条件就返回true 就代表有相同的
        // 我们取反 就是没有的值
        return !this.channels.some(item1 => {
          // 将所有频道列表和用户频道列表作对比  如果双方都有该id 说明都有 返回true
          return item1.id === item.id
        })
      })
    }
  },
  data () {
    return {
      // 所有频道
      allChannels: [],
      // 弹出层的状态
      editing: false
    }
  },
  methods: {
    // 添加频道
    async addChannel (channel) {
      // 接口要求传的参有三个 除了id name  还要一个seq  所以通过map给每一项都加一个属性
      const orderChannels = this.channels.map((item, index) => {
        return {
          id: item.id,
          name: item.name,
          seq: index
        }
      })
      console.log(orderChannels)
      // 将点击的这个频道追加到orderChannels中
      orderChannels.push({
        id: channel.id,
        name: channel.name,
        // 数组长度就是新元素的索引值
        seq: orderChannels.length
      })
      // 判断是不是【推荐】频道 后端不要推荐这个频道
      if (orderChannels[0].id === 0) {
        orderChannels.splice(0, 1)
      }
      try {
        // 发送添加频道的请求
        await addChannel(orderChannels)
        // 本身每个频道都有很多属性 所以新加的频道必须也有很多个属性
        // 让父元素添加
        // console.log('fffff')
        this.$emit('add-success', {
          id: channel.id,
          name: channel.name,
          articles: [],
          loading: false,
          finished: false,
          isLoading: false,
          timestamp: Date.now(),
          error: false
        })
      } catch (error) {
        console.log(error)
        this.$toast.fail('添加频道失败')
      }
    },
    // 删除频道  id s是给请求传参，index是为了给父组件
    async deleteChannel (id, index) {
      try {
        // 根据id删除频道 发送请求
        await deleteChannel(id)
        // 通知父组件删除频道
        this.$emit('delete-success', index)
      } catch (error) {
        // console.log(error)
        this.$toast.fail('删除频道失败')
      }
    },
    //   点击那个频道？ 根据索引值判断
    toggleActive (index) {
      // 关闭弹窗
      this.$emit('input', false)
      //   改变acitve值
      // this.$emit('update-active', index)
      this.$emit('update:active', index)
    },
    //   获取所有频道列表
    async getAllChannels () {
      try {
        const ret = await getAllChannels()
        console.log(ret)
        // console.log(ret)
        this.allChannels = ret.data.channels
      } catch (error) {
        console.log(error)
        this.$toast.fail('获取所有频道失败')
      }
    }
  }
}
</script>
<style scoped lang="less">
.van-popup--bottom {
  &.van-popup--round {
    border-radius: 0;
  }
}
.van-action-sheet {
  max-height: 100%;
  height: 100%;
  .van-action-sheet__header {
    background: #3296fa;
    color: #fff;
    .van-icon-close {
      color: #fff;
    }
  }
}
.channel {
  padding: 10px;
  .tit {
    line-height: 3;
    .tip {
      font-size: 10px;
      color: #999;
    }
  }
  .van-button {
    float: right;
    margin-top: 7px;
  }
  .btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ddd;
    font-size: 12px;
    color: #fff;
  }
  .f12 {
    font-size: 12px;
    color: #555;
  }
  .red {
    color: red;
  }
}
</style>
